<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>Hammerjs Example</title>
    <style>
      * {
        font-size: 10px;
      }

      .touchpad {
        height: calc(100% - 40px);
        background-color: #71baf6;
        white-space: pre;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(2, 50%);
        overflow: hidden;
      }

    </style>
</head>
<body style="margin: 0; padding: 0;overflow: hidden">

<div id="app" style="height:100vh; padding: 20px; background-color: #0a0; font-size: 8px">
    <button style="position: absolute; bottom: 0; width: 50%; height: 50px;" @click="textLog='';textCurEvent=''">清空</button>
    <div class="touchpad">
        <div style="">
            <div style="height: 100%; width: 100%; resize: none;" v-text="textLog"></div>
        </div>
        <div style="">
            <div style="height: 100%; width: 100%; resize: none;" v-text="textCurEvent"></div>
        </div>
    </div>
</div>

<script type="module">
  import "../common/plugins/vue/2.6.11.min.js"
  import "../common/plugins/hammerjs/2.0.8.min.js"

  new Vue({
    el: '#app',
    data() {
      return {
        textLog: '',
        textCurEvent: '',
      }
    },
    watch: {},
    mounted() {
      console.log('mounted')

      /**
       * https://hammerjs.github.io/recognizer-pinch/
       * https://www.jianshu.com/p/0b0b9364f967/
       */
      const hammer = new Hammer(this.$el);
      // 配置 https://hammerjs.github.io/recognizer-tap/
      hammer.get('tap').set({//点击配置
        // pointers: 0,//不能这样
        threshold: 1000,// 过小时,会丢失很多点击事件,While doing a tap some small movement is allowed.
        posThreshold: 200,// The maximum position difference between multiple taps.
      });
      hammer.get('pan').set({//移动配置
        pointers: 0,//Required pointers. 0 for all pointers.
        threshold: 1,//Minimal pan distance required before recognizing.
        direction: Hammer.DIRECTION_ALL,//不设置时,会经常丢失事件
      });
      hammer.get('press').set({
        // pointers: 0,//不能这样
        time: 0
      });//按下配置

      hammer.on("tap press pressup panstart panmove panend pancancel", e => {
        this.addLog(`${e.type}[${e.maxPointers}], [${e.center.x},${e.center.y}], [${e.deltaX},${e.deltaY}], ${e.deltaTime}`)
        this.textCurEvent = JSON.stringify(e, (key, value) => {
          if (key === 'pointers' || key === 'changedPointers') {
            return undefined // 过滤
          }
          return value
        }, 2)
      })
    },
    methods: {
      addLog(str) {
        // console.log(str)
        this.textLog = `${str} \n${this.textLog}`
      },
    },
  })
</script>
</body>
</html>
